<template>
  <div class="max">
    <div >
      <el-card>
        <div class="description">
          <span>说明：目前支持学科和关键字条件筛选</span>
          <span> <el-button
                style="float: right"
                size="small"
                type="success"
                icon="el-icon-edit"
                >新增试题</el-button
              ></span>
              </div>
        <el-form>
          <div class="sareach">
            <el-form-item>
                 <span class="directory">学科</span>
                <el-select v-model="value" placeholder="请选择" style="width:250px">
          <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
                 </el-select>
              <span class="city">二级目录</span>
              <el-select v-model="value" placeholder="请选择" style="width:250px">
          <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
                 </el-select>
              <span class="city">标签</span>
               <el-select v-model="value" placeholder="请选择" style="width:250px">
          <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
                 </el-select>
              <span class="abbreviation">关键字</span>
              <el-input style="width:250px" v-model="subName"  placeholder="根据题干搜索"></el-input>
              <div class="header">
                <span class="satae">试题类型</span>
              <el-select v-model="value" placeholder="请选择" style="width:250px">
          <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
                 </el-select>
                  <span class="difficulty">难度</span>
               <el-select v-model="value" placeholder="请选择" style="width:250px">
          <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
                 </el-select>
                  <span class="city">方向</span>
               <el-select v-model="value" placeholder="请选择" style="width:250px">
          <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
                 </el-select>
                  <span class="ntry">录入人</span>
               <el-select v-model="value" placeholder="请选择" style="width:250px">
          <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
                 </el-select>
                 <div class="navar"> <span class="satae">题目备注</span>
 <el-input style="width:250px" v-model="subName"  ></el-input>
  <span class="city">企业简称</span>
 <el-input style="width:250px" v-model="subName"  ></el-input>
   <span class="city">城市</span>
               <el-select v-model="value" placeholder="请选择" style="width:122px">
              <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
                 </el-select>
                  <el-select v-model="value" placeholder="请选择" style="width:127px" class="tcity">
          <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
                 </el-select>
                <el-button
                size="small"
                style="margin-left: 206px"
                @click="clearDate"
                >清除</el-button
              >
              <el-button size="small" type="primary" >搜索</el-button></div>

             </div>

            </el-form-item>
          </div>
        </el-form>
        <el-alert
        v-if="alertText!==''"
        :title="alertText"
        type="info"
        class="alert"
        :closable="false"
        show-icon
        >
        </el-alert>

    <el-table
      :data="dataList"

      element-loading-text="给我一点时间"
      fit
     highlight-current-row
      style="width: 100%">
         <el-table-column
          label="试题编号"
          width="147"
          align="center"
        >
        <template slot-scope="scope">
          {{ scope.row.number}}
        </template>
      </el-table-column>
      <el-table-column
        label="学科"
          align="center"

        >
          <template slot-scope="scope">
          {{scope.row.subject}}
        </template>
      </el-table-column>
         <el-table-column
          label="目录"
          align="center"
        >
        <template slot-scope="scope">
          <span>{{scope.row.catalog}}</span>
        </template>
      </el-table-column>
       <el-table-column
          label="题型"
          align="center"
          width="160"
        >
        <template slot-scope="scope">
          <span>{{scope.row.questionType==='1'? '单选':scope.row.questionType==='2'?'多选':'简答'}}</span>
        </template>
      </el-table-column>
       <el-table-column
          label="题干"
          width="280"
        >
        <template slot-scope="scope">
          <span>{{scope.row.question}}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="录入时间"
          align="center"
          width="180"

        >
        <template slot-scope="scope">
          <span>{{scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")}}</span>
        </template>
      </el-table-column>
       <el-table-column
          label="难度"
          align="center"
          width="80"

        >
        <template slot-scope="scope">
          <span>{{ scope.row.difficulty==='1'? '简单': scope.row.difficulty==='2'?'一般':'困难'}}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="录入人"
          align="center"
          width="120"
        >
        <template slot-scope="scope">
          <span>{{ scope.row.creator}}</span>
        </template>
      </el-table-column>
 <el-table-column
          label="审核状态"
          align="center"
          width="120"

        >
        <template slot-scope="scope">
          <span>{{ scope.row.creator}}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="审核意见"
          align="center"
          width="150"
        >
        <template slot-scope="scope">
          <span>{{ scope.row.creator}}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="审核人"
          align="center"
          width="120"
        >
        <template slot-scope="scope">
          <span>{{ scope.row.creator}}</span>
        </template>
      </el-table-column>
       <el-table-column
          label="发布状态"
          align="center"
          width="150"
        >
        <template slot-scope="scope">
          <span>{{ scope.row.creator}}</span>
        </template>
      </el-table-column>
       <el-table-column
          fixed="right"
          label="操作"
          width="200"
          align="center"
        >
        <template >
        <el-button type="text"
          class="abcd"
        >
              预览
            </el-button>
            <el-button
              type="text"
          class="abcd"
              >审核</el-button
            >
             <el-button
              type="text"
          class="abcd"
              >修改</el-button
            >
              <el-button
              type="text"
          class="abcd"
              >上架</el-button
            >
            <el-button
              type="text"
          class="abcd"
              >删除</el-button
            >

      </template>
      </el-table-column>
    </el-table>

       <div class="pagination"
                style="float: right"
         >
          <PageTool
            :paginationPage="directory.page"
            :paginationPagesize="directory.pagesize"
            :total="total"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
          ></PageTool>
        </div>

      </el-card>
    </div>
  </div>
</template>

<script>
import { html2Text } from '@/utils/index.js'
import { choice } from '@/api/hmmm/questions.js'
import PageTool from '@/module-manage/components/page-tool'
export default {
  components: {
    PageTool
  },
  data () {
    return {
      alertText: '',
      subName: '',
      dataList: [],
      total: null,
      directory: {
        page: 1,
        pagesize: 10
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList (params) {
      const { data } = await choice(this.directory)
      this.dataList = data.items
      // console.log(this.dataList)
      const arr = this.dataList
      arr.forEach(item => {
        item.question = html2Text(item.question)
        console.log(item.question)
      })
      this.total = data.counts
      this.alertText = `数据一共${this.total}条`
    },
    handleCurrentChange (val) {
      this.directory.page = val
      this.getList()
    },
    handleSizeChange (val) {
      this.directory.pagesize = val
      if (this.directory.page === 1) {
        this.getList(this.directory)
      }
    },
    clearDate () {
      this.subName = ''
    }
  }
}
</script>

<style scoped lang='less'></style>
<style rel="stylesheet/scss" lang="scss"  scoped>
.description{
  color:pink;
  font-size:12px ;
  height: 33px;
}
.sareach{
  margin-top: 10px;
}
.max{
  padding: 20px;
}
.directory {
 margin-left: 31px;
 margin-right: 12px;
 font-weight: 600;
}
.city{
  margin-left: 30px;
  margin-right: 12px;
 font-weight: 600;
}
.abbreviation{
  margin-left: 28px;
 font-weight: 600;
  margin-right: 12px;
}
.difficulty{
    margin-left: 60px;
  margin-right: 12px;
 font-weight: 600;
}
.ntry{
     margin-left: 28px;
  margin-right: 10px;
 font-weight: 600;
}
.header{
  margin-top: 18px;
}
.satae{margin-left: 3px;
 font-weight: 600;

margin-right: 12px;}
.tcity{
margin-left: 4px;
}
.navar{
  margin-top: 10px;
}
.pagination {
  margin-top: 10px;
  // text-align: right;
}
.abcd{
  font-size: 12px;
}
</style>
